<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生社交媒体与人际关系分析仪表盘</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #333;
            margin-bottom: 30px;
            text-align: center;
        }
        .chart-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        canvas {
            max-height: 400px;
            width: 100% !important;
        }
        .loading-message {
            text-align: center;
            padding: 50px;
            color: #666;
        }
    </style>
    
    <!-- 使用项目中已有的本地simple_chart.js替代实现，完全不依赖外部CDN -->
    <script src="/static/js/simple_chart.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('新仪表盘页面已加载');
            
            // 首先显示加载消息
            const mainContent = document.getElementById('main-content');
            const loadingMessage = document.createElement('div');
            loadingMessage.className = 'loading-message';
            loadingMessage.textContent = '正在加载数据，请稍候...';
            mainContent.appendChild(loadingMessage);
            
            // 使用simple_chart.js提供的waitForChart函数安全获取Chart对象
            window.waitForChart(function(Chart) {
                console.log('Chart.js本地替代实现已成功加载');
                
                // 移除加载消息
                mainContent.removeChild(loadingMessage);
                
                // 创建一个简单的示例图表
                try {
                    // 创建图表容器
                    const chartContainer = document.createElement('div');
                    chartContainer.className = 'chart-container';
                    chartContainer.innerHTML = `
                        <h2>示例图表</h2>
                        <canvas id="demoChart"></canvas>
                    `;
                    mainContent.appendChild(chartContainer);
                    
                    // 初始化图表
                    const ctx = document.getElementById('demoChart').getContext('2d');
                    const demoChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: ['正面互动', '负面互动', '中性互动', '社交活跃度', '孤独感指数'],
                            datasets: [{
                                label: '学生社交媒体数据分析',
                                data: [65, 28, 45, 80, 30],
                                backgroundColor: [
                                    'rgba(75, 192, 192, 0.8)',
                                    'rgba(255, 99, 132, 0.8)',
                                    'rgba(255, 206, 86, 0.8)',
                                    'rgba(54, 162, 235, 0.8)',
                                    'rgba(153, 102, 255, 0.8)'
                                ],
                                borderColor: [
                                    'rgba(75, 192, 192, 1)',
                                    'rgba(255, 99, 132, 1)',
                                    'rgba(255, 206, 86, 1)',
                                    'rgba(54, 162, 235, 1)',
                                    'rgba(153, 102, 255, 1)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100
                                }
                            }
                        }
                    });
                    
                    console.log('图表初始化成功');
                    
                    // 添加成功消息
                    const successMessage = document.createElement('div');
                    successMessage.className = 'alert alert-success text-center';
                    successMessage.textContent = 'Chart.js已成功加载并显示图表！';
                    mainContent.insertBefore(successMessage, chartContainer);
                    
                } catch (error) {
                    console.error('初始化图表时出错:', error);
                    
                    // 显示错误消息
                    const errorMessage = document.createElement('div');
                    errorMessage.className = 'alert alert-danger text-center';
                    errorMessage.textContent = '创建图表时出错: ' + error.message;
                    mainContent.appendChild(errorMessage);
                }
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <h1>学生社交媒体与人际关系分析仪表盘</h1>
        <div id="main-content"></div>
    </div>
</body>
</html>